import tx from '../../../assets/images/avatar.png'
// 导入moment
import moment from 'moment'
export default function List({ list, clickedUp, clickedDown, delLi }) {
  // 格式化时间
  const formatTime = (date) => {
    return moment(date).format('YYYY年MM月DD日')
  }
  return (
    <div className="comment-list">
      {list.map((item) => {
        return (
          <div className="list-item" key={item.id}>
            <div className="user-face">
              <img className="user-head" src={tx} alt="" />
            </div>
            <div className="comment">
              <div className="user">{item.author}</div>
              <p className="text">{item.comment}</p>
              <div className="info">
                <span className="time">{formatTime(item.time)}</span>
                <span className={item.attitude === 1 ? 'like liked' : 'like'}>
                  <i
                    className="icon"
                    onClick={() => clickedUp(item.id, item.attitude)}
                  />
                </span>
                <span className={item.attitude === -1 ? 'hate hated' : 'hate'}>
                  <i
                    className="icon"
                    onClick={() => clickedDown(item.id, item.attitude)}
                  />
                </span>
                <span
                  className="reply btn-hover"
                  onClick={() => delLi(item.id)}>
                  删除
                </span>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}
